<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/bootstrap/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/flat-admin/css/style.css">
    <link rel="stylesheet" type="text/css" href="${cdn_url}/static/plugin/flat-admin/css/themes/flat-blue.css">
    <link rel="stylesheet" href="${cdn_url}/static/plugin/element-ui/css/index.css">
<!-- 引入组件库 -->
	<style type="text/css">
		.demo-table-expand {
			font-size: 0;
		}
		.demo-table-expand label {
		    width: 90px;
		    color: #99a9bf;
		}
		.demo-table-expand .el-form-item {
		    margin-right: 0;
		    margin-bottom: 0;
		    width: 33%;
		}
	</style>
</head>
<body>

<div id="main">
	<template>
	  <el-table :data="table.tableData" style="width: 100%">
	    <el-table-column type="expand">
	      <template slot-scope="props">
	        <el-form label-position="left" inline class="demo-table-expand">
	          <el-form-item label="用户id">
	            <span>{{ props.row.id }}</span>
	          </el-form-item>
	          <el-form-item label="用户名称">
	            <span>{{ props.row.name }}</span>
	          </el-form-item>
	          <el-form-item label="用户年龄">
	            <span>{{ props.row.age }}</span>
	          </el-form-item>
	        </el-form>
	      </template>
	    </el-table-column>
	    <el-table-column label="用户ID" prop="id">
	    </el-table-column>
	    <el-table-column label="用户名称" prop="name">
	    </el-table-column>
	    <el-table-column label="用户年龄" prop="age">
	    </el-table-column>
	    <el-table-column label="操作">
	      <template slot-scope="scope">
	        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
	        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	</template>
	<el-pagination v-if="table.pagination"
	  background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="table.pageno"
      :page-sizes="table.pagesizes"
      :page-size="10"
      :layout="table.layout"
      :total="table.total">
    </el-pagination>
</div>
 
<script src="${cdn_url}/static/plugin/vue/js/vue.js"></script>
<script src="${cdn_url}/static/plugin/vue/js/vue-router.js"></script>
<script src="${cdn_url}/static/plugin/vue/js/axios.min.js"></script>
<script src="${cdn_url}/static/plugin/element-ui/js/index.js"></script>
<script>
var vm = new Vue({
    el: '#main',
    data: {
		pageno:1,
		pagesize:10,
		totalpage:0,
		totalcount:0,
        
        active: 'home',
        table:{
        	pagination:true,
        	pageno:1,
    		layout:"total,sizes, prev, pager, next, jumper",
    		pagesizes:[10, 20, 30, 40, 50],
    		tableData: [],
    		total:0,
    		pagesize:10,
        }
        
    },
 
    // 点击菜单使用的函数
    methods: {
    	handleSizeChange(val) {
          console.log('每页'+ val +'条');
          vm.pagesize = val;
          this.getTableData();
        },
        handleCurrentChange(val) {
          console.log('当前页: '+ val );
          vm.pageno = val;
          this.getTableData();
        },
        handleEdit(index,row){
        	  console.log("编辑")
          	  console.log(row)
        },
        handleDelete(index,row){
      	  console.log("删除")
      	  console.log(row)
        },
   		getTableData:function(){
   			var params = new URLSearchParams();
        	params.append('pageno', vm.pageno);       //你要传给后台的参数值 key/value
        	params.append('pagesize', vm.pagesize);
        	axios.post('/list', params).then(function (response) {
            	console.log(response.data.list)
            	var data = response.data;
            	vm.table.pagesize = data.pagesize;
            	vm.table.pageno = data.pageno;
            	vm.table.totalPage = data.totalPage;
            	vm.table.total = data.totalCount;
                vm.table.tableData = data.list;
              }).catch(function (error) {
                console.log(error);
              });
   		},
        onload:function(){
        	this.getTableData();
        }
    }
});
vm.onload();
</script>

</body>
</html>